<template>
  <div class="knowledge-page">
    <h1 class="page-title">知识库</h1>
    <p class="knowledge-intro">
      这里收集了各种技术教程、最佳实践和学习资源，方便查阅和学习。
    </p>

    <div class="knowledge-categories">
      <el-collapse v-model="activeCategories">
        <el-collapse-item
          v-for="(category, index) in categories"
          :key="index"
          :name="index"
        >
          <template #title>
            <div class="category-header">
              <h2 class="category-title">
                <el-icon class="header-icon" :class="activeCategories.includes(index) ? 'is-active' : ''">
                  <CaretRight />
                </el-icon>
                {{ category.title }}
              </h2>
            </div>
          </template>

          <div class="knowledge-list">
            <el-card
              v-for="item in category.items"
              :key="item.title"
              class="knowledge-card"
              shadow="hover"
            >
              <div class="knowledge-card-content">
                <el-icon :class="['knowledge-icon', item.iconClass]">
                  <component :is="item.icon" />
                </el-icon>
                <div class="knowledge-info">
                  <h3 class="knowledge-title">{{ item.title }}</h3>
                  <p class="knowledge-desc">{{ item.description }}</p>
                </div>
                <div class="knowledge-actions">
                  <el-button type="primary" text>
                    查看详情
                    <el-icon class="el-icon--right">
                      <ArrowRight />
                    </el-icon>
                  </el-button>
                </div>
              </div>
            </el-card>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ArrowRight, CaretRight } from '@element-plus/icons-vue'

// 默认展开第一个分类
const activeCategories = ref([0])

const categories = [
  {
    title: '后端开发',
    items: [
      {
        title: 'Java 核心技术',
        description: 'Java 基础、集合框架和并发编程',
        icon: 'Monitor',
        iconClass: 'java-icon'
      },
      {
        title: 'Spring 全家桶',
        description: 'Spring、Spring Boot 和 Spring Cloud',
        icon: 'Cpu',
        iconClass: 'spring-icon'
      },
      {
        title: '微服务架构',
        description: '微服务设计、部署和最佳实践',
        icon: 'Connection',
        iconClass: 'microservice-icon'
      }
    ]
  },
  {
    title: '前端开发',
    items: [
      {
        title: 'Vue.js 开发',
        description: 'Vue 3、组合式 API 和状态管理',
        icon: 'Grid',
        iconClass: 'vue-icon'
      },
      {
        title: 'React 开发',
        description: 'React Hooks、Redux 和性能优化',
        icon: 'Menu',
        iconClass: 'react-icon'
      }
    ]
  },
  {
    title: '数据存储',
    items: [
      {
        title: 'MySQL 数据库',
        description: 'MySQL 优化、事务和锁机制',
        icon: 'DataLine',
        iconClass: 'mysql-icon'
      },
      {
        title: 'Redis 缓存',
        description: 'Redis 数据类型、持久化和集群',
        icon: 'Histogram',
        iconClass: 'redis-icon'
      },
      {
        title: 'Elasticsearch 搜索',
        description: 'ES 索引、查询和聚合分析',
        icon: 'Search',
        iconClass: 'es-icon'
      }
    ]
  },
  {
    title: '开发工具',
    items: [
      {
        title: 'Git 使用指南',
        description: 'Git 常用命令、工作流和团队协作',
        icon: 'Switch',
        iconClass: 'git-icon'
      },
      {
        title: 'Docker 容器化',
        description: 'Docker 基础、Compose 和 Kubernetes 入门',
        icon: 'Box',
        iconClass: 'docker-icon'
      },
      {
        title: 'VSCode 配置与插件',
        description: 'VSCode 高效配置、必备插件和快捷键',
        icon: 'Notebook',
        iconClass: 'vscode-icon'
      }
    ]
  }
]
</script>

<style scoped>
.knowledge-page {
  width: 100%;
  padding: 24px 0;
  background-color: var(--primary-bg);
}

.page-title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  color: rgba(0, 0, 0, 0.85);
}

.knowledge-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5715;
}

.knowledge-categories {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.category-header {
  display: flex;
  align-items: center;
}

.category-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 8px;
  font-size: 12px;
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  color: rgba(0, 0, 0, 0.45);
}

.header-icon.is-active {
  transform: rotate(90deg);
  color: var(--accent-color);
}

.knowledge-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 16px;
  padding: 8px 0;
}

.knowledge-card {
  height: 100%;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 2px;
  border: 1px solid #f0f0f0;
}

.knowledge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 
              0 3px 6px 0 rgba(0, 0, 0, 0.12), 
              0 5px 12px 4px rgba(0, 0, 0, 0.09);
}

.knowledge-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
}

.knowledge-icon {
  font-size: 32px;
  margin-bottom: 16px;
  align-self: center;
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0.85;
}

.knowledge-card:hover .knowledge-icon {
  transform: scale(1.1);
  opacity: 1;
}

.knowledge-info {
  flex: 1;
}

.knowledge-title {
  font-size: 16px;
  margin: 0 0 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.knowledge-desc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.5715;
}

.knowledge-actions {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  width: 100%;
}

:deep(.el-collapse) {
  border: none;
  background: transparent;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  margin-bottom: 16px;
}

:deep(.el-collapse-item__header:hover) {
  background-color: #f5f5f5;
}

:deep(.el-collapse-item__content) {
  padding: 8px 16px 24px;
}

:deep(.el-button--text) {
  padding: 4px 0;
  font-size: 14px;
}

:deep(.el-button--text:hover) {
  color: var(--accent-color);
  background: transparent;
}

/* 图标颜色调整为更柔和的色调 */
.java-icon {
  color: #1890ff;
}

.spring-icon {
  color: #52c41a;
}

.microservice-icon {
  color: #722ed1;
}

.vue-icon {
  color: #13c2c2;
}

.react-icon {
  color: #2f54eb;
}

.mysql-icon {
  color: #fa8c16;
}

.redis-icon {
  color: #f5222d;
}

.es-icon {
  color: #faad14;
}

.git-icon {
  color: #eb2f96;
}

.docker-icon {
  color: #1890ff;
}

.vscode-icon {
  color: #722ed1;
}
</style>
